<script setup>
	import {
		ref
	} from 'vue';

	const db = uniCloud.database();
	const dataList = ref([])


	const getData = async () => {
		/* 传统方式
		// 查询wallpaper表
		let res = await db.collection('defaultdemo-wallpaper')
		let datas = res.result.data
		for (let i = 0; i < datas.length; i++) {
			let classid = datas[i].classid
			// 查询classify表
			let row = await db.collection("demo-classify").where(`_id == "${classid}"`)
				.get({
					getOne: true
				});
			datas[i].newClassname = row.result.data.name
		}
		
		dataList.value = datas
		
*/

		let wallTemp = db.collection("demo-wallpaper")
			.where(`classid == "671a62e9c082e669c75409d7"`)
			.field("_id,description,picurl,classid")
			.orderBy("_id desc")
			.skip(0)
			.limit(3)
			.getTemp();
		let classTemp = db.collection("demo-classify")
			.field("_id,name")
			.getTemp();
		//主表在前 ，副表在后
		let res = await db.collection(wallTemp, classTemp)
			.field("_id,description,picurl,classid")
			.get();


		console.log(res);

		dataList.value = res.result.data
	}
</script>
<template>
	<view class="layout">
		<view class="item" v-for="item in dataList" :key="item._id">
			<view class="left">
				<image :src="item.picurl" mode="widthFix"></image>
			</view>
			<view class="right">
				<view class="desc">{{item.description}}</view>
				<view class="name">{{item.classid[0].name}}</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.layout {
		padding: 30rpx;

		.item {
			display: flex;

			.left {
				width: 200rpx;

				image {
					width: 100%;
				}
			}

			.right {
				flex: 1;
				padding-left: 30rpx;

				.desc {
					font-size: 38rpx;
				}

				.name {
					font-weight: bold;
				}
			}
		}
	}
</style>